<template>
  <el-menu
      :collapse="isCollapse"
      style="min-height: 100%; overflow-x: hidden"
      :collapse-transition="false"
      text-color="#fff"
      active-text-color="#ffd046"
      background-color="rgb(48, 65, 86)"
      router
  >
    <div style="height: 60px; line-height: 60px; text-align: center">
      <img src="../assets/logo.png" alt="首页" style="width: 30px; position: relative; margin-right: 5px; top: 6px">
      <b style="color: white" v-show="logoTextShow">后台管理系统</b>
    </div>

    <el-input
        v-if="showSearch"
        v-model="searchQuery"
        placeholder="搜索菜单"
        clearable
        style="margin: 10px;"
        prefix-icon="el-icon-search"
    ></el-input>

    <el-submenu v-for="item in filteredMenu" :key="item.index" :index="item.index">
      <template #title>
        <i :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </template>
      <el-submenu v-for="subItem in item.children" :key="subItem.index" :index="subItem.index">
        <template #title>
          <i :class="subItem.icon"></i>
          <span>{{ subItem.title }}</span>
        </template>
        <el-menu-item v-for="menuItem in subItem.children" :key="menuItem.index" :index="menuItem.index">
          {{ menuItem.title }}
        </el-menu-item>
      </el-submenu>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "Aside",
  props: {
    isCollapse: {
      type: Boolean,
      default: false,
    },
    logoTextShow: {
      type: Boolean,
      default: true,
    },
    asideWidth: {
      type: Number,
      default: 280,
    },
    showSearch: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchQuery: "",
      menuItems: [
        {
          index: "1",
          title: "导航一",
          icon: "el-icon-location",
          children: [
            {
              index: "1-1",
              title: "系统管理",
              icon: "el-icon-setting",
              children: [
                {index: "/login", title: "登录"},
                {index: "/user", title: "用户管理"},
                {index: "/depart", title: "部门管理"},
                {index: "/role", title: "角色管理"},
                {index: "/pageIndex", title: "对话"},
                {index: "/function", title: "表单管理"},
                {index: "/mailManage", title: "邮件管理"},
                {index: "/drawingCanvas", title: "画图"},
                {index: "/designer", title: "设计"},
              ],
            },
          ],
        }
      ],
    };
  },
  computed: {
    filteredMenu() {
      if (!this.searchQuery) {
        return this.menuItems;
      }
      const query = this.searchQuery.toLowerCase();
      return this.menuItems
          .map(item => {
            const filteredChildren = item.children.map(subItem => {
              const filteredMenuItems = subItem.children.filter(menuItem =>
                  menuItem.title.toLowerCase().includes(query)
              );
              return {
                ...subItem,
                children: filteredMenuItems,
              };
            }).filter(subItem => subItem.children.length > 0);
            return {
              ...item,
              children: filteredChildren,
            };
          })
          .filter(item => item.children.length > 0);
    },
  },
};
</script>

<style scoped>
.el-menu-vertical-demo {
  min-height: 100%;
}
</style>
